<template>

  <div style="">
    <div style="">
      <div style="">
        <blur :blur-amount=20 :url="bjImgUrl" :height=80 style="background-color:rgba(0,0,0,0~1);">

          <!-- <p class="center">  <img src="@/assets/img/timg.jpg" v-on:click="ulogin()"></p> -->
          <flexbox :gutter='0'>
            <flexbox-item :span="1/5" class="flexitem">
              <p class="center"><img :src="memberImgUrl" :onerror="defaultImg" v-on:click="ulogin"></p>
            </flexbox-item>
            <!-- <flexbox orient="vertical" :gutter="0"> -->

            <!-- <flexbox-item :span="1/2" class="flexitem"><p class="center"><a :href='memberUrl'>{{ memberName }}</a></p></flexbox-item> -->
            <flexbox-item :span="3/5" class="flexitem">
              <p class="center">
                <a v-on:click="ulogin">{{ memberName }}
                  <div class="detail" v-show="isgrxx">个人信息
                    <i class="iconfont icon-xiangqing"></i>
                  </div>
                </a>
              </p>
            </flexbox-item>

            <flexbox-item :span="1/5" class="flexitem" @click.native="getBalance">
              <p style="text-align: left;" v-show="isjhtitle">
                <i class="iconfont icon-xiangqing" style="font-size:11px;color:#5a5a5a;">
                  激活会员卡
                </i>
              </p>
              <p style="text-align: center;" v-show="isShowQrcode">
                <qrcode value="5649812656111946" :size="20" :options="{displayValue:false,marginBottom:1}"></qrcode>
              </p>
            </flexbox-item>

            <!-- <flexbox-item :span="1/2" class="flexitem">   -->
            <!-- <div class="lvdiv"> 
                <img src="@/assets/img/dj0.png" class="lvimg">
              </div> -->
            <!-- </flexbox-item> -->
            <!-- </flexbox> -->
          </flexbox>
        </blur>
      </div>
      <!-- <div style="text-align:center;height: 90%;">
        <x-img :src="hyimgsrc" class="hyimg" :offset="-100" container="#vux_view_box_body"></x-img>
      </div>   -->
    </div>
    <div style="background-color:#f7f7f7">
      <group>
        <cell title="点餐记录" style="font-size:14px;" is-link @click.native="getOrderRecord">
          <i class="iconfont icon-zhangdan cionstyle" slot="icon"></i>
        </cell>
        <cell :title="'会员卡'" is-link @click.native="getBalance" :value="hykDes" style="font-size:14px;">
          <i class="iconfont icon-huiyuanqia cionstyle" slot="icon"></i>
        </cell>
        <cell v-if="business.isOpenRecharge==1" :title="'充值'" is-link @click.native="onRecharge" style="font-size:14px;">
          <i class="iconfont icon-chongzhi cionstyle" slot="icon"></i>
        </cell>
        <cell :title="'消费明细'" is-link @click.native="getCzxfMx" style="font-size:14px;">
          <i class="iconfont icon-xiaofeijilu cionstyle" slot="icon"></i>
        </cell>
      </group>
      <group>
        <cell :title="'优惠券'" is-link style="font-size:14px;" @click.native="getVoucher">
          <i class="iconfont icon-youhuiquan1 cionstyle" slot="icon"></i>
        </cell> 
        <cell :title="glsj" is-link style="font-size:14px;" @click.native="RelevancePhone">
          <i class="iconfont icon-shouji1 cionstyle" slot="icon"></i>
        </cell>
        <cell :title="'关于我们'" is-link style="font-size:14px;" @click.native="getAboutUs">
          <i class="iconfont icon-guanyu cionstyle" slot="icon"></i>
        </cell> 
      </group>
    </div>
    <!-- <divider>为您推荐</divider>  -->

    <div v-transfer-dom> 

      <confirm v-model="showConfirmPhone" :title="'提示'" @on-cancel="onCancelPhone" @on-confirm="onConfirmPhone">
        <p style="text-align:center;">{{ phone }} <br />是否更换该手机号？ </p>
      </confirm>

    </div>
  </div>
</template>

<script>
import { sign, signStr,getCookie } from "@/assets/js/sign.js";
import {
  XDialog,
  Confirm,
  XImg,
  Divider,
  Card,
  Blur,
  Cell,
  Alert,
  Group,
  Flexbox,
  FlexboxItem,
  Qrcode,
  TransferDomDirective as TransferDom
} from "vux";
import { 
  isWeiXin,
  getWXLoginUrl,
  urlParse,
  getTCodeUrl
} from "@/assets/js/utils"; //获取url参数

export default {
  directives: {
    TransferDom
  },
  components: {
    XDialog,
    Confirm,
    XImg,
    Alert,
    Divider,
    Blur,
    Group,
    Cell,
    Flexbox,
    FlexboxItem,
    Qrcode
  },
  data() {
    return {
      business: null, //商家信息
      loginId: null,
      password: null,
      phone: null,
      openid: null,
      isgrxx: false,
      memberUrl: "/ULogin",
      memberName: "请点击登录/注册",
      show: false,
      defaultImg: 'this.src="' + require("@/assets/img/timg.jpg") + '"',
      memberImgUrl: require("@/assets/img/timg.jpg"),
      bjImgUrl: require("@/assets/img/vip-bj4.jpg"),
      money: 0, 
      hykDes: '',
      showConfirmPhone: false, //是否更换手机 
      glsj: '关联手机',
      stateurl: "", //微信授权登录后 跳转的地址
      isShowQrcode: false, //右上角是否显示二维码
      isjhtitle: false, //右上角是否显示激活提示标题
      membersj: null,
      memberpt: null
    };
  },
  beforeCreate() {},
  created() {
    this.memberCreate();
    // console.log("sjInfo: " + JSON.stringify(this.business));
  },
  methods: {
    memberCreate() {
      let tcode = getTCodeUrl(); 
      this.stateurl = decodeURIComponent(window.location.href);
      localStorage.setItem("memberurl", this.stateurl); 

      this.memberpt = this.$store.state.memberInfoPt; 

      this.loginId = this.memberpt.bianh;
      // sessionStorage.getItem("loginId"); 
      this.phone = this.memberpt.dianh;
      // sessionStorage.getItem("phone");
      this.openid = this.memberpt.weixbh;
      // sessionStorage.getItem("openid"); 
      this.business = this.$store.state.sellerInfo; 

      let _openid = ""; 
      _openid = this.$route.params.openid; 
      if (_openid != "" && _openid != "null" && _openid != null) {
        sessionStorage.setItem("openid", _openid);
        this.openid = _openid;
        this.isgrxx = true;
      } else {
        this.isgrxx = false;
      }

      if (this.openid == "" || this.openid == "null" || this.openid == null) {
        if (isWeiXin()) {
          window.location.href = getWXLoginUrl(
            encodeURIComponent(this.stateurl)
          );
          this.$router.push("/Member");
          this.isgrxx = true;
        } else {
          this.isgrxx = false;
          // this.$vux.alert.show({ title:'提示', content:'请在微信客户端打开链接'} )
          // this.$vux.toast.show({ type: "text",text: '请在微信客户端打开链接' });
        }
      }

      if (
        (this.phone == null && this.loginId == null && this.openid == null) ||
        (this.phone == "null" &&
          this.loginId == "null" &&
          this.openid == "null") ||
        (this.phone == "" && this.loginId == "" && this.openid == "")
      ) { 
        this.isgrxx = false;
      } else { 
        this.isgrxx = true; 
      }
      this.selectMember();
    },
    ulogin: function() { 
      if (this.isgrxx == false) {
        this.$router.push("/ULogin");
      } else {
        this.$router.push("/MemberInfo");
      }
    },
    //根据phone,loginid,openid查询平台会员信息
    selectMember: function() {
      // console.log("openid: " + this.openid + ",loginId: " + this.loginId + ",phone: " + this.phone+",sjid: "+this.business.id);
      let urlparam = sign("/v1/api/member/MemberGet"); 
      urlparam.append("phone", this.phone);
      urlparam.append("loginid", this.loginId); 
      urlparam.append("openid", this.openid);
      urlparam.append("sjid", this.business.id);

      this.$http.post("member/MemberGet", urlparam).then(ret => {
        if (ret.status == 200) {
          var _data = ret.data.resultObject;
          var _code = ret.data.code || ret.data.result.code;
          var _msg = ret.data.msg || ret.data.result.msg;
          if (_code == 1) {
            if (_data == "" || _data == "null" || _data == null) return;
              
            //存储平台会员信息
            // localStorage.setItem("memberpt", JSON.stringify(_data.hyxx));
            this.$store.commit("addMemberInfoPt", _data.hyxx);
            //存储商家会员信息
            // localStorage.setItem("membersj", JSON.stringify(_data.hycx));
            this.$store.commit("addMemberInfoSj", _data.hycx);

            // console.log("MemberInfoSj: "+JSON.stringify(this.$store.state.memberInfoSj))

            this.membersj = _data.hycx;
            this.memberpt = _data.hyxx;

            // console.log("memberpt: "+JSON.stringify(this.memberpt))
            // console.log("membersj: "+this.membersj)

            this.loginId = _data.hyxx.bianh;
            this.phone = _data.hyxx.dianh;
            this.openid = _data.hyxx.weixbh; 
            
            this.memberName = _data.hyxx.mingc; //会员昵称+
            this.memberImgUrl = _data.hyxx.headimgurl;
            if(_data.hyxx.dianh != '' && _data.hyxx.dianh != null && _data.hyxx.dianh != 'null'){
                this.glsj = '更换手机号'
            }
            

              if(_data.hycx != '' && _data.hycx != null && _data.hycx != 'null'){ 
                this.isShowQrcode = true;
                this.isjhtitle = false;
                this.money = this.membersj.zhangsje;
                this.hykDes = '余额￥'+ this.money;
                /*
                for(var i=0;i< this.membersj.length;i++){ 
                  //获取本商家的会员信息
                  if(this.membersj[i].bshangjbId == this.business.id){ 
                    localStorage.setItem("mymembersj", JSON.stringify(this.membersj[i]));
                    this.money = this.membersj[i].zhangsje; 
                  }
                  }*/ 
              }else{
                // localStorage.removeItem("mymembersj")
                this.$store.commit("addMemberInfoSj", null); 
                this.isShowQrcode = false;
                this.isjhtitle = true;
                this.hykDes = '未激活';
              }
            } else { 
              this.isShowQrcode = false;
              this.isjhtitle = true;
              this.hykDes = '';
            }
            return 1;
          } else {
            //清空
            this.memberpt = null;
            this.membersj = null;
            // this.memberUrl = '/ULogin'; //会员信息页面URL
            this.memberName = "请点击登录/注册"; //会员昵称
            this.memberImgUrl = require("@/assets/img/timg.jpg");
            this.isgrxx = false; 
            this.hykDes = '';
            this.isShowQrcode = false;
            this.isjhtitle = true;
            return 0;
          }
        } );
    },
    //我的订餐记录
    getOrderRecord() {
      if (this.memberpt == null) {
        this.$vux.toast.show({ type: "text", text: "请登录" });
        return;
      }

      this.$router.push("/OrderRecord");
    },
    getBalance() {
      if (this.memberpt == null) {
        this.$vux.toast.show({ type: "text", text: "请登录" });
        return;
      }
      this.$router.push("/MyCard");
      // if(this.isShowQrcode){
      //   this.$router.push("/MyCard");
      // }
      // if(this.isjhtitle){
      //   this.$router.push("/URegister");
      // }
    }, 
    //关联手机号
    RelevancePhone() {
      if (this.memberpt == null) {
        this.$vux.toast.show({ type: "text", text: "请登录" });
        return;
      }
      if (this.phone != null && this.phone != "null" && this.phone != "") {
        this.showConfirmPhone = true;
      } else {
        this.$router.push("/URegister");
      }
    },
    onConfirmPhone() {
      this.$router.push("/URegister");
    },
    onCancelPhone() {
      this.showConfirmPhone = false;
    }, 
    onCancel() {
      this.showConfirm = false;
    },
    //获取我的优惠券
    getVoucher() {
      if (this.membersj == null) {
        this.$vux.toast.show({ type: "text", text: "请激活会员" });
        return;
      }
      let pthyid = this.memberpt.id,
        sjid = this.business.id;
      this.$router.push("/MyVoucher/" + pthyid + "/" + sjid);
    },
    //充值中心
    onRecharge(){
      if (this.membersj == null) {
        this.$vux.toast.show({ type: "text", text: "请激活会员" });
        return;
      }
      this.$router.push("/URecharge");
    },
    getCzxfMx(){
      if (this.membersj == null) {
        this.$vux.toast.show({ type: "text", text: "请激活会员" });
        return;
      }
      this.$router.push("/MyBalance");
    },
    getAboutUs(){
      this.$router.push("/AboutUs");
    }
  },
  mounted() {
    // setTimeout(() => {
    // this.money = 10
    // }, 2000)
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    // "$route": "memberCreate"
    // $route(to, from) {
    //   if (to.name == "Member") {
    //     console.log("TO: " + to.name);
    //     console.log("FROM: " + from.name);
    //     this.memberCreate();
    //   }
    // }
  },
  activated() {
    this.$emit("viewIn", "member");
  }
};
</script>

<style scoped lang="less">
// @import '~vux/src/styles/1px.less';

.card-demo-flex {
  display: flex;
}
.card-demo-content01 {
  padding: 10px 0;
}
.card-padding {
  padding: 15px;
}
.card-demo-flex > div {
  flex: 1;
  text-align: center;
  font-size: 12px;
}
.center {
  text-align: left;
  // padding-top: 10px;
  padding: 10px 10px;
  color: #fff;
  font-size: 18px;
}
a {
  color: rgb(0, 0, 0);
  font-size: 18px;
}
.detail {
  color: #777;
  font-size: 14px;
}
.center img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 4px solid #ececec;
}

.lvimg {
  width: auto;
  height: 20px;
  max-width: 100%;
  max-height: 100%;
}
.lvdiv {
  width: 100%;
  height: 25px;
  text-align: left;
}
.flexitem {
  text-align: left;
  // background-color: #20b907;
}
.hyimg {
  width: 100%;
  height: auto;
}
.hybgcolor {
  background-color: #5e5e5e;
}
.icon {
  /* 通过设置 font-size 来改变图标大小 */
  width: 1em;
  height: 1em;
  /* 图标和文字相邻时，垂直对齐 */
  vertical-align: -0.15em;
  /* 通过设置 color 来改变 SVG 的颜色/fill */
  fill: currentColor;
  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
      normalize.css 中也包含这行 */
  overflow: hidden;
}

div.rightTop {
  position: absolute;
  right: 0;
  top: 0;
  padding: 0 1rem;
  margin-top: 1rem;
}
div.divloading {
  // width:400px;
  height: 50px;
  // border:1px solid #666;
  overflow: hidden;
  position: relative;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.cionstyle{
  font-size:25px;margin-right:5px;
}
</style>